<template>
  <div class="uploadMain">
    <Upload
      v-model:fileList="imgList"
      list-type="picture-card"
      class="w-full"
      :accept="accept"
      :headers="{
        authorization: 'authorization-text',
        t: token,
        lang: lang,
      }"
      :name="name"
      :customRequest="customUpload"
      @preview="handlePreview"
      @remove="handRemove"
    >
      <div v-if="fileList.length < showUpload">
        <img :src="addField" alt="" />
        <div
          style="
            margin-top: 8px;
            color: #444;
            font-size: 12px;
            font-weight: 500;
            line-height: normal;
          "
        >
          <div>{{ describe }}</div>
          <div>{{ limitNum }}</div>
        </div>
      </div>
    </Upload>
    <Modal
      :visible="previewVisible"
      :title="modalTitle"
      :destroyOnClose="true"
      :footer="null"
      :centered="true"
      :width="modalSize[0]"
      :height="modalSize[1]"
      @cancel="handleCancelPreview"
    >
      <div class="w-full p-5">
        <img class="rounded-[4px]" :src="preImgUrl" alt="" style="width: 100%" />
      </div>
    </Modal>
  </div>
</template>
<script setup lang="ts">
  import { useUserStore } from '/@/store/modules/user';
  import { useLocale } from '/@/locales/useLocale';
  import { Upload, Modal, message } from 'ant-design-vue';
  import { getDataTypePreviewUrl } from '/@/utils/helper/paramsHelper';
  import { computed, ref } from 'vue';
  import addField from '/@/assets/svg/addField.svg';

  interface Props {
    fileList: any[];
    name: string;
    accept: string;
    limitNum: string | number;
    describe: string;
    modalTitle: string;
    limitSizeObj: {
      width: number;
      height: number;
    };
    showUpload: number;
    modalSize: [number, number];
    api: (data: any) => any;
  }
  const props = defineProps<Props>();

  const emits = defineEmits(['update:fileList', 'remove', 'success']);
  const userStore = useUserStore();
  const token = userStore.getToken;
  const lang = useLocale().getLocale.value;
  const previewVisible = ref(false);

  const imgList = ref(props.fileList);
  const limitSizeObj = computed(() => props.limitSizeObj);
  const preImgUrl = computed(() => props.fileList[0].url);
  const modalSize = computed(() => props.modalSize);
  const accept = computed(() => props.accept);

  function handlePreview() {
    previewVisible.value = true;
  }
  function handleCancelPreview() {
    previewVisible.value = false;
  }
  function handRemove(e) {
    emits('remove', e);
  }
  function beforeUpload(file) {
    if (!file.type.startsWith('image/')) {
      return message.error('无法读取文件');
    }
    if (!props.accept.split(',').includes(file.type)) {
      const type = props.accept
        .replace(/image\//g, '')
        .replace(/,/g, ',')
        .toUpperCase();
      message.error(`图片格式必须为${type}`);
      return false;
    }
    const reader = new FileReader();
    reader.readAsDataURL(file);
    return new Promise((resolve) => {
      reader.onload = (event) => {
        // 读取完成后，event.target.result 将包含 Data URL
        if (event.target?.result) {
          const img = new Image();
          img.src = event.target.result as string;

          // 计算大小，决定是否通过
          // const fileSizeInKB = file.size / 1024;
          // const fileSizeInMB = file.size / 1024 / 1024;
          // if (sizeUnit == 'KB') {
          //   if (fileSizeInKB > maxSize) {
          //     fileData.value = [];
          //     return message.error(`图片大小必须小于 ${maxSize}KB`);
          //   }
          // } else if (sizeUnit == 'MB') {
          //   if (fileSizeInMB > maxSize) {
          //     fileData.value = [];
          //     return message.error(`图片大小必须小于 ${maxSize}MB`);
          //   }
          // }
          img.onload = () => {
            if (img.width != limitSizeObj.value.width || img.height != limitSizeObj.value.height) {
              message.error(
                `图片尺寸必须是 ${limitSizeObj.value.width} x ${limitSizeObj.value.height}`,
              );
              return resolve(false);
            }
            resolve(true);
          };
        } else {
          message.error('无法读取文件');
          return resolve(false);
        }
      };
    });
  }

  async function customUpload(e) {
    const msg = await beforeUpload(e.file);
    if (!msg) {
      e.onError(new Error('文件类型不符合要求'), null);
      imgList.value = [];
      return false;
    }
    const params = {
      file: e.file,
      name: props.name,
    };

    try {
      const { data } = await props.api(params);
      const imageUrl = data.data;
      // 转化为有效路径
      const validUrl = await getDataTypePreviewUrl(imageUrl);
      e.onSuccess(imageUrl, e);
      emits('update:fileList', [{ url: validUrl, backUrl: imageUrl }]);
      emits('success', imageUrl);
      message.success('上传成功');
    } catch (error) {
      console.log(error);
      message.error('上传失败');
      throw new Error(error.response.data);
    }
  }
</script>
<style scoped lang="scss"></style>
